@import "../MsfsAvionicsCommon/definitions";

@mixin GenericPulsingFill($color) {
  @keyframes pulsing {
      0%, 100% {
          fill: $color;
      }
      50% {
          fill: scale-color($color, $lightness: -50%);
      }
  }
  animation: pulsing 1s step-end infinite;
}

@mixin GenericPulsingStroke($color) {
@keyframes pulsingS {
  0%, 100% {
      stroke: $color;
  }
  50% {
      stroke: scale-color($color, $lightness: -50%);
  }
}
animation: pulsingS 1s step-end infinite;
}


@font-face {
  font-family: "Ecam";
  //noinspection CssUnknownTarget
  src: url("/Fonts/fbw-a32nx/ECAMFontRegular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.ewd-svg {
  position: absolute;
  width: 768px;
  height: 768px;
  background: $display-background;
  font-family: "Ecam", monospace !important;

    .EWDWarningTextLeft {
        fill: white;
        font-size: 1.55em;
        letter-spacing: 0.047em;
    }

    tspan {
      white-space: pre;
    }

    text, tspan {
        fill: $display-white;
        stroke: none !important;

        &.Standard {
            font-size: 22px;
        }

        &.Medium {
            font-size: 20px;
        }

        &.Large {
            font-size: 26px;
        }

        &.EWDWarn {
            font-size: 24px;
            letter-spacing: 1.75px;
        }

        &.Huge {
            font-size: 30px;
        }

        &.Cyan {
            fill: $display-cyan !important;
        }

        &.Cyan.DimColor {
            fill: scale-color($display-cyan, $lightness: -50%) !important;
        }

        &.Green {
            fill: $display-green !important;
        }

        &.Green.DimColor {
            fill: scale-color($display-green, $lightness: -50%) !important;
        }

        &.Amber {
            fill: $display-amber;
        }

        &.Amber.DimColor {
            fill: scale-color($display-amber, $lightness: -50%) !important;
        }

        &.Red {
            fill: $display-red;
        }

        &.Red.DimColor {
            fill: scale-color($display-red, $lightness: -50%) !important;
        }

        &.Magenta {
            fill: $display-magenta;
        }

        &.Magenta.DimColor {
            fill: scale-color($display-magenta, $lightness: -50%) !important;
        }

        &.Center {
            text-anchor: middle !important;
        }

        &.End {
            text-anchor: end !important;
        }

        &.GreenTextPulse {
            @include GenericPulsingFill($display-green);
        }

        &.Underline {
            text-decoration: underline;
            text-decoration-color: $display-amber;
        }
    }

    .AmberStroke {
        stroke: $display-amber !important;
    }

    .Separator {
      stroke: $display-grey;
      stroke-width: 4;
      fill: none;
      stroke-linecap: round;
    }

    .Line {
        stroke: $display-green;
        stroke-width: 2;
        fill: none;
    }

    .AmberLine {
        stroke: $display-amber !important;
        stroke-width: 2;
        fill: none;
    }

    .GreenLine {
        stroke: $display-green !important;
        stroke-width: 2;
        fill: none;
    }

    .WhiteLine {
        stroke: $display-white !important;
        stroke-width: 2;
        fill: none;
    }

    .RedLine {
        stroke: $display-red !important;
        stroke-width: 2;
        fill: none;
    }


    .BackgroundLine {
        stroke: $display-background !important;
        stroke-width: 2;
        fill: $display-background;
    }

    .BackgroundFill {
        fill: $display-background !important;
    }

    .GreenFill {
        fill: $display-green !important;
        stroke: none;
    }

    .Show {
        display:block;
    }

    .Hide {
        display: none;
    }

    .DonutThrottleIndicator {
        fill: none;
        stroke-width: 2px;
        stroke: $display-cyan;
    }
    .GreenPulse {
        animation: green-pulse 1s step-end infinite;
        stroke: none !important;

        @keyframes green-pulse {
            0%, 100% {
              fill: $display-green;
            }
            50% {
                fill: hsl(120, 100%, 20%)
            }
        }
    }

    .GreenPulseNoFill {
        animation: green-pulse 1s step-end infinite;

        @keyframes green-pulse {
            0%, 100% {
              stroke: $display-green;
            }
            50% {
                stroke: hsl(120, 100%, 20%)
            }
        }
    }

    .DarkGreyBox {
        stroke: $display-grey;
        fill: none;
        stroke-width: 2;
    }

    .AmberBox {
        stroke: $display-amber;
        fill: none;
        stroke-width: 2;
    }

    .LightGreyBox {
        stroke: none;
        fill: $display-grey;
    }

    .SlatsSmallWhite, .FlapsSmallWhite {
        stroke: $display-white;
        stroke-width: 2px;
        stroke-linejoin: bevel;
    }

    .SlatsSmallCyan, .FlapsSmallCyan {
        stroke: $display-cyan;
        stroke-width: 2px;
        stroke-linejoin: bevel;
    }

    .Path {
        stroke: $display-green;
        stroke-width: 2px;
        fill: none;
        stroke-linejoin: bevel !important;
    }

}
